import React, { useState, useEffect } from 'react';
import styles from './index.module.scss'
import { Divider, Row, Col, Typography } from 'antd'
import MeModel from '../../../../models/meModel'
import StudyModel from '../../../../models/studyModel'
import { withRouter, RouteComponentProps } from 'react-router-dom'

const { Text, Title } = Typography;

interface PropsInterface extends RouteComponentProps {
  meModel: MeModel
}

function WebMeExperience(props: PropsInterface) {

  const [models, setModels] = useState<Array<StudyModel>>([]);

  useEffect(() => {
    StudyModel.getMeModels().then((models: any) => {
      setModels(models)
    }).catch(() => { })
  }, [])

  const itemClick = function (model: StudyModel) {
    props.history.push(`/web/study/detail?id=${model._id}`)
  }

  const ExperienceList = props.meModel.experience_show_arr.map((str: string, index: number) => {
    return [
      <Text key={index}>{str}</Text>,
      <br key={'br'} />
    ]
  })

  const StudyList = models.map((model: StudyModel) => {
    return (
      <li
        onClick={() => itemClick(model)}
        style={{ backgroundImage: `url(${model.pcMeIconUrl})` }}
        className={`${styles['item']} w-hover-float-shadow w-image-fit w-round w-pointer`}
        key={model._id}
      >
        <Title className={`w-flex-center w-text-center ${styles['title']}`} level={4}>{model.title}</Title>
      </li>
    )
  })

  return (
    <div className={ styles['web-me-experience'] }>
      <Divider>工作经验</Divider>
      <Row gutter={16}>
        <Col span={12}>
          {ExperienceList}
        </Col>
        <Col span={12}>
          <ul className={styles['study-list']}>
            {StudyList}
          </ul>
        </Col>
      </Row>
    </div>
  );
}

export default withRouter<PropsInterface>(WebMeExperience);
